<template>
  <q-page class="row gutter-md" :padding="!$q.platform.is.mobile"> 
    <!-- excel duplicate -->
    <div class="col-xs-12 col-md-6">
      <q-list dense class="q-py-none" :no-border="$q.platform.is.mobile">
        <q-list-header>Excel比对去重</q-list-header>
        <q-item>
           <q-input class="full-width" type="text" float-label="比对基准列的列名" v-model="mapping.header" />
        </q-item>
        <q-item>
          <q-uploader ref="uploader" url="/404" class="full-width" multiple hide-upload-button auto-expand extensions="xls,xlsx" 
              :disable="mapping.loading" float-label="比对Excel文件列表"
             @add="fileAdded" @remove:cancel="beforeFileRemoved" />
        </q-item>
        <q-item sparse>
          <q-item-main />
          <q-item-side right>
            <q-btn color="primary" icon="mdi-upload-multiple" label="上传比对" 
                :disable="mapping.disable"
                :loading="mapping.loading" @click="removeDuplicate"/>
          </q-item-side>
        </q-item>
      </q-list>
    </div>

    <!-- excel mutiply -->
    <div class="col-xs-12 col-md-6">
      <q-list dense class="q-py-none" :no-border="$q.platform.is.mobile">
        <q-list-header>Excel重复数据标记</q-list-header>
        <q-item>
           <q-input class="full-width" type="text" float-label="重复基准列的列名" v-model="repeating.header" />
        </q-item>
        <q-item>
          <q-uploader ref="uploader2" url="/404" class="full-width" hide-upload-button auto-expand extensions="xls,xlsx" 
              :disable="repeating.loading" float-label="需标记重复数据的Excel文件"
             @add="repeatAdd" @remove:cancel="repeatRemove" />
        </q-item>
        <q-item sparse>
          <q-item-main />
          <q-item-side right>
            <q-btn color="primary" icon="mdi-upload" label="上传文件" 
                :disable="repeating.disable"
                :loading="repeating.loading" @click="tagRepeating"/>
          </q-item-side>
        </q-item>
      </q-list>
    </div>


  </q-page>
</template>

<script>
export default {
  name: 'PageIndexFaq',
  data() {
    return {
      mapping:{
        header: '豆瓣ID',
        loading: false,
        disable: true
      },
      repeating: {
        header: '豆瓣ID',
        loading: false,
        disable: true
      }
    }
  },
  mounted() {
    let me = this;
    this.$api.ui.pageTitle = '实用工具';
    this.$api.ui.pageBackBtn = function(){
      me.$router.go(-1);
    }
  },
  methods: {
    // 2 excel files mapping
    fileAdded(files) {
      this.mapping.disable = (this.$refs.uploader.files.length<2);
    },
    beforeFileRemoved(files) {      
      this.mapping.disable = (this.$refs.uploader.files.length<3);
    },
    removeDuplicate() {
      let me = this;
      me.mapping.loading = true;
      me.$api.tool.removeDuplicate(me.mapping.header, me.$refs.uploader.files, res=>{
        me.mapping.loading = false;
        me.mapping.disable = true;
        me.$refs.uploader.reset();
      }, err=>{
        me.mapping.loading = false;
        me.mapping.disable = true;
        me.$refs.uploader.reset();
      });
    },

    // 1 excel file repeating
    repeatAdd(files) {
      this.repeating.disable = false;
    },
    repeatRemove(files) {
      this.repeating.disable = true;
    },

    tagRepeating() {
      let me = this;
      me.repeating.loading = true;
      me.$api.tool.tagRepeat(me.repeating.header, me.$refs.uploader2.files, res=>{
        me.repeating.loading = false;
        me.repeating.disable = true;
        me.$refs.uploader2.reset();
      }, err=>{
        me.repeating.loading = false;
        me.repeating.disable = true;
        me.$refs.uploader2.reset();
      });
    }
  }
}
</script>